<template>
  <div v-loading="loading" class="list">
    <el-table
      :data="list"
      :header-cell-style="{background: '#F5F7FA'}"
      style="width: 100%;"
      border
    >
      <el-table-column align="center" label="姓名" prop="dinner" />

      <el-table-column align="center" label="电话" prop="user.phone" />

      <el-table-column align="center" label="所属部门" prop="user_department.name">
        <template v-slot="{ row }">
          {{ row?.user_department?.name ?? '--' }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="申请日期">
        <template v-slot="{ row }">
          {{ timeFormat(row.created_at) ?? '--' }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="用餐时间">
        <template v-slot="{ row }">
          {{ row.confirm_time ?? '--' }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="用餐类型">
        <template v-slot="{ row }">
          {{ eatType[row?.type] ?? '--' }}
        </template>
      </el-table-column>

      <el-table-column
        show-overflow-tooltip
        align="center"
        label="是否用餐"
        prop="reason"
      >
        <template v-slot="{ row }">
          <el-tag
            v-if="!row.is_eat"
            type="danger"
            effect="dark"
          >
            未用餐
          </el-tag>

          <el-tag
            v-if="row.is_eat"
            type="primary"
            effect="dark"
          >
            已用餐
          </el-tag>

          <!--          <el-tag-->
          <!--            v-if="row.not_apply === 1 && row.is_eat === 1"-->
          <!--            type="warning"-->
          <!--            effect="dark"-->
          <!--          >-->
          <!--            超时提交-->
          <!--          </el-tag>-->

          <!--          <div v-if="row.is_eat && !row.not_apply">-->
          <!--            {{ row.reason }}-->
          <!--          </div>-->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import dayjs from 'dayjs'
export default {
  name: '',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      eatType: {
        breakfast: '早饭',
        lunch: '中饭',
        dinner: '晚饭'
      }
    }
  },
  methods: {
    timeFormat(time) {
      if (!time) return ''

      return dayjs(time).format('YYYY-MM-DD')
    }
  }
}
</script>
<style lang="scss" scoped>
.list {
  min-height: 300px;
}
</style>
